<!DOCTYPE html>
<html lang="zh_CN">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .box1{
            width: 100px;

            border: 1px solid red;
        }
        .box2{
            width: 300px;
            border: 1px solid blue;
        }


    </style>
</head>
<body>

<!--1. 块级： 独占一行 从上到下-->
<!--2. 内敛（行内）：不会独占一行，从左到右-->
<div class="box1">Lorem ipsum dolor sit amet, consectetur adipisicing.</div>
<!-- .box2 tab键-->
<div class="box2">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad at atque autem facilis ipsam, iste minima, nemo quam quia quis rem sed soluta totam. Quas, quia tenetur. Aliquam animi beatae commodi eius enim excepturi ipsam labore, magni odit quae sapiente soluta tempore ullam ut, velit? Dicta iste, odio? Aspernatur iusto minus neque pariatur quia quos sint tenetur? Deleniti earum explicabo, ipsum magnam molestias unde! Autem blanditiis deserunt esse id, labore maxime natus necessitatibus officiis praesentium quae quas repellat?
</div>

<i>斜体</i> <b>加粗</b> <a href="http://www.baidu.com">百度</a>

<p>这种块级元素独占一行，从上到下，行内元素从左到右这种排布的方式我们叫做标准文档流（文档流：文档里面的元素（标签）流动（摆放）的规则）</p>

</body>
</html>